<template>
  <div class="app-container">
    <el-row>
      <el-button type="primary" @click="sortFunc">刷新数据</el-button>
      <el-button type="primary">导出</el-button>
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      style="width:100%"
      highlight-current-row
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{scope.row.number}}
        </template>
      </el-table-column>

      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="个人总分" align="center">
        <template slot-scope="scope">
          {{scope.row.personageScores}}
        </template>
      </el-table-column>
      <el-table-column label="排名" align="center">
        <template slot-scope="scope">
          {{scope.row.ranking}}
        </template>
      </el-table-column>
    </el-table>

    <el-row style="text-align: right; margin-right: 10px;">
      <div class="grid-content bg-purple-light">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
  import {getList, sort, personSortList} from '@/api/table'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: null,
        pages: null,//总页数
        total: null,//总条数
        pageNum: 1,//当前页
        listLoading: true,
        pageSize: 15
      }
    },
    created() {
      this.sortList()
    },
    methods: {
      sortFunc() {
        this.listLoading = true
        sort().then(response => {
          personSortList(this.pageNum, this.pageSize).then(response => {
            this.pages = response.data.pages
            this.total = response.data.total
            this.pageNum = response.data.pageNum
            this.list = response.data.list
            this.listLoading = false
            this.$message({
              message: "刷新成功",
              type: 'success'
            });
          }).catch(e => {
            this.listLoading = false
            this.$message.error('刷新失败');
          })
        })
      },
      sortList() {
        this.listLoading = true
        personSortList(this.pageNum, this.pageSize).then(response => {
          this.pages = response.data.pages
          this.total = response.data.total
          this.pageNum = response.data.pageNum
          this.list = response.data.list
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
      },
      handleCurrentChange(e) {
        this.pageNum = e
        this.sortList()
      },
      handleSizeChange(e) {
        console.log(e)
      }
    }
  }
</script>
